<template>
  <div class="container">
    <!--数据统计-->
    <el-card shadow="always" style="margin-bottom: 30px;" :body-style="{ padding: '20px' }">
      <template #header>
        数据统计
      </template>
      <el-row :gutter="24">
        <el-col :span="6" class="rowBorder">
          <el-statistic title="调解成功数" :value="mediatorData.successCount" />
        </el-col>
        <el-col :span="6" class="rowBorder">
          <el-statistic title="调解满意度" :value="null">
            <template #suffix>
              <el-rate v-model="mediatorData.score" disabled show-score text-color="#ff9900"
                score-template="{value} 分" />
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6" class="rowBorder">
          <el-statistic title="调解完结率" :value="mediatorData.completedRate * 100">
            <template #suffix>%</template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="调解成功率" :value="mediatorData.successRate * 100">
            <template #suffix>%</template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <div class="lineContainer" style="justify-content: space-evenly;">
      <calendar ></calendar>
      <center>
          <!--排行榜-->
      <el-card shadow="always"  style="margin-left: 20px;width: 500px;" :body-style="{ padding: '20px' }">
        <template #header>
          排行榜
        </template>
        <el-table :data="rankingList" border>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column prop="workTime" label="工作时长">
          </el-table-column>
          <el-table-column prop="points" label="积分">
          </el-table-column>
          <el-table-column prop="points" label="操作" >
            <template #default="scope">
              <el-button type="success" round icon="view"
                @click="mediatorStatDataDialog.look(scope.row.mId)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      </center>
    </div>
    <DetailedCase :case="detailedCase.case" :case-id="detailedCase.caseId" v-model="detailedCase.visible">
    </DetailedCase>
    <!--查看某个调解员的数据统计-->
    <el-dialog style="width: 40vw;" v-model="mediatorStatDataDialog.visible">
      <template #title>
        <div>调解员其他数据统计</div>
      </template>
      <el-form label-width="150px">
        <el-form-item label="调解成功的案件总数" prop="name">
          {{ mediatorStatDataDialog?.data?.successCount }}
        </el-form-item>
        <el-form-item label="完成率">
          {{ mediatorStatDataDialog.data?.completedRate*100 }}%
        </el-form-item>
        <el-form-item label="成功率">
          {{ mediatorStatDataDialog.data?.successRate*100 }}%
        </el-form-item>
        <el-form-item label="平均评分">
          <el-rate v-model="mediatorStatDataDialog.data.score" disabled show-score text-color="#ff9900"
          score-template="{value} 分" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import calendar from '@/compontent/calendar.vue';
import DetailedCase from '@/compontent/detailedCase.vue';
import useFileStore from '@/stores/fileStore';
import { Case, CaseStatus } from '@/types/response/case';
import MediatorRank from '@/types/response/mediatorRank';
import PaymentHistory from '@/types/response/paymentHistory';
import { examinePaymentHistoryReq } from '@/axios/case/paymentHistoryReq';
import { getUnCompletedCaseByMediatorId } from '@/axios/case/caseReq';
import { getPaymentWaitExamine } from '@/axios/case/paymentHistoryReq';
import { getMediatorData, getRankingList } from '@/axios/case/mediatorCase';
import { getRepaymentListByInsId } from '@/axios/case/repaymentReq';
import { setMediationResult } from '@/axios/case/caseReq';
import useUserStore from '@/stores/userStore';
import { reactive, Ref, ref } from 'vue';
import Repayment from '@/types/response/repayment';
import Notice from '@/utils/notice';
import MediatorCase from '@/types/response/mediatorCase';
let userStore = useUserStore();
let mediatorData: Ref<MediatorCase> = ref(new MediatorCase())
let rankingList: Ref<MediatorRank[]> = ref([]);//排行榜
function init() {
  //获得排行榜
  getRankingList(userStore.userId).then(res => {
    rankingList.value = res;
  })
  //获得该调解员的具体数据
  getMediatorData(userStore.userId).then(res => {
    mediatorData.value = res;
  })
}
init();

//调解员的统计数据
let mediatorStatDataDialog: {
  id: number,
  visible: boolean,
  data: MediatorCase,
  dataMap: Map<number, MediatorCase>,
  look: (id: number) => void,
  hidden: Function
} = reactive({
  id: null,
  visible: false,
  data: null,
  dataMap: new Map<number, MediatorCase>(),
  look(id: number) {
    mediatorStatDataDialog.id = id;
    mediatorStatDataDialog.visible = true;
    let d = mediatorStatDataDialog.dataMap.get(id);
    if (d) mediatorStatDataDialog.data = d;
    else {  
      mediatorStatDataDialog.data=new MediatorCase();
      getMediatorData(id).then(res => {
        mediatorStatDataDialog.dataMap.set(id, res);
        mediatorStatDataDialog.data = res;
      })
    }
  },
  hidden() {
    mediatorStatDataDialog.id = null;
    mediatorStatDataDialog.data = null;
    mediatorStatDataDialog.visible = false;
  }
})
//案件的详细数据展示
let detailedCase = ref({
  look: (c:Case) => {
    detailedCase.value.caseId = c.caseId;
    detailedCase.value.case=c;
    detailedCase.value.visible = true;
  },
  visible: false,
  caseId: null,
  case: null
});



</script>
<style lang="scss">
.rowBorder {
  border-right: 1px solid #ccc;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container {
  .el-col {
    text-align: center;
  }

  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  .lineContainer {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
  }
}
</style>